<template>
<div class="piao">
  <div class="piaolist" v-for="(item, index) of  list" :key="index">
    <div class="piaoheader">
      <div class="dtheader">
        <span class="iconfont header-link">&#xe60b;</span>
      </div>
      <div class="p">
        {{item.title}}
      </div>
    </div>
    <div class="titlelist" v-for="(neirong, index) of item.neirong" :key="index">
      <div class="titlelist-left">{{neirong.title}}</div>
      <div class="titlelist-right">
        <div class="fuhao">{{neirong.fuhao}}</div>
        <div class="money">{{neirong.money}}</div>
        <div class="zi">{{neirong.zi}}</div>
        <span class="iconfont img">&#xe668;</span>
      </div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: 'DetailList',
  data () {
    return {
      list: [{
        title: '成人票',
        neirong: [{
          title: '日夜场通宵',
          fuhao: '¥',
          money: '210',
          zi: '起'
        }, {
          title: '[当天可订]日夜场通宵',
          fuhao: '¥',
          money: '214',
          zi: '起'
        }, {
          title: '日夜场通宵（持港澳通行证专享）',
          fuhao: '¥',
          money: '200',
          zi: '起'
        }, {
          title: '夜场票',
          fuhao: '¥',
          money: '65',
          zi: '起'
        }]
      }, {
        title: '冰雪世界',
        neirong: [{
          title: '滑冰票',
          fuhao: '¥',
          money: '44',
          zi: '起'
        }, {
          title: '套票（滑冰+嬉雪+冰雕园）',
          fuhao: '¥',
          money: '67',
          zi: '起'
        }]
      }, {
        title: '年卡',
        neirong: [{
          title: '成人票',
          fuhao: '¥',
          money: '379',
          zi: '起'
        }, {
          title: '双人票',
          fuhao: '¥',
          money: '579',
          zi: '起'
        }, {
          title: '亲子票',
          fuhao: '¥',
          money: '429',
          zi: '起'
        }, {
          title: '家庭票',
          fuhao: '¥',
          money: '679',
          zi: '起'
        }]
      }, {
        title: '旅游跟拍',
        neirong: [{
          title: '深圳旅游跟拍2小时',
          fuhao: '¥',
          money: '399',
          zi: '起'
        }, {
          title: '深圳旅游跟拍3小时',
          fuhao: '¥',
          money: '549',
          zi: '起'
        }]
      }]
    }
  }
}
</script>

<style lang="stylus" scoped>
  .piaolist
    margin-right: .1rem
    overflow: hidden
    font-size: 1.3rem
    color: #666
    position: relative
    padding-bottom: .71rem
    background: #c5c5c54f
    .piaoheader
      height: 3.15rem
      line-height: 3.15rem
      background: #fff
      .p
        margin-left: 2.5rem
      .dtheader
        left: 0.8rem
        top: 1rem
        height: 1.2rem
        width: 1.2rem
        border-radius: .6rem
        overflow: hidden
        background: #00bcd4
        float: left
        position: relative
        .iconfont
          color: #fff
          height: 1.2rem
          line-height: 1.2rem
          position: absolute
          font-size: 1.1rem
          top: .1rem
          left: .05rem
    .titlelist
      padding-left: .8rem
      font-size: 1.15rem
      height: 3.15rem
      line-height: 3.15rem
      overflow: hidden
      width: 100%
      display: flex
      background: #fff
      .titlelist-left
        flex: .94
      .titlelist-right
        color: #ff9800
        font-size: .75rem
        display: contents
        .fuhao
          margin: .1rem
        .money
          font-size: 1.3rem
        .zi
          margin: .1rem
          color: #9e9e9e
        .img
          font-size: 1rem
          color: #9e9e9e
</style>
